<template>
  <div>
    <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
      <div class="site-navbar__header">
        <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
          <!-- 主页login -->
          <!-- <a class="site-navbar__brand-lg" href="javascript:;">
        </a>
         <a class="site-navbar__brand-mini" href="javascript:;">微穗</a> -->

          <div class="site-navbar_content">
            <img src="../../static/img/logos.png" />
            <div class="site-navbar_content_text">
              <p>健康生活系统</p>
              <p>Healthy living system</p>
            </div>
            <div class="head_nav">
              <i class="el-icon-s-fold"></i>
            </div>
          </div>
        </h1>
        <div class="site-navbar_white"></div>
      </div>
    </nav>

    <!-- 主页右边 -->
    <!-- 第一种情况 -->
    <div class="site-navbar_add_right_box">
      <div
        class="site-navbar_add_right"
        :style="this.$route.path === '/home' ? 'padding-bottom: 0;' : ''"
      >
        <!-- 咨询轮播 -->
        <div class="site-navbar_add_swiper">
          <img src="../../static/img/zhixun.png" />
          <div class="site-navbar_add_swiper_box">
            <el-carousel height="20px" direction="vertical" :autoplay="true">
              <el-carousel-item v-for="item in swiper_arr" :key="item.text">
                <p>{{ item.text }}</p>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!-- 用户信息 -->
        <div class="site-navbar_add_user">
          <div class="site-navbar_input">
            <input type="text" placeholder="请输入关键字" />
            <img src="../../static/img/search_icon.png" />
          </div>
          <p></p>
          <!-- <el-dropdown>
            <div class="site-navbar_down_icon">
              
            </div>
            <p>李千梓</p>
            <div class="site-navbar_head_icon">
              <img src="/static/img/head_icon.png" />
            </div>
          </el-dropdown> -->
          <el-dropdown @command="clickItem">
            <span class="el-dropdown-link">
              <div>
                <img src="../../static/img/down_icon.png" />
              </div>
              <span>{{ userinfo.userName }}</span>
              <div class="site-navbar_head_icon">
                <img :src="userinfo.headImgUrl" />
              </div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit-outline"
                >编辑资料</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-bell">消息通知</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" command="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
export default {
  data() {
    return {
      updatePassowrdVisible: false,
      swiper_arr: [{ text: '欢迎来到健康生活系统！' }, { text: '健康生活系统' }],
      userinfo: JSON.parse(sessionStorage.getItem('userMsg'))
    }
  },
  components: {
    UpdatePassword
  },
  computed: {
    navbarLayoutType: {
      get() { return this.$store.state.common.navbarLayoutType }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold },
      set(val) { this.$store.commit('common/updateSidebarFold', val) }
    },
    mainTabs: {
      get() { return this.$store.state.common.mainTabs },
      set(val) { this.$store.commit('common/updateMainTabs', val) }
    },
    userName: {
      get() { return this.$store.state.user.name }
    }
  },
  created() {

  },
  methods: {

    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    // logoutHandle() {
    //   this.$confirm(`确定进行[退出]操作?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$http({
    //       url: this.$http.adornUrl('/sys/logout'),
    //       method: 'post',
    //       data: this.$http.adornData()
    //     }).then(({ data }) => {
    //       if (data && data.code === 0) {
    //         clearLoginInfo()
    //         this.$router.push({ name: 'login' })
    //       }
    //     })
    //   }).catch(() => { })
    // },
    logout() {
      clearLoginInfo()
      this.$router.push({ name: 'login' })
    },
    clickItem(command) {
      this[command]();
    },
  }
}
</script>
<style lang="scss">
.site-navbar {
  width: 1.6667rem;
  border-bottom: none;
}
.site-navbar_add_user {
  display: flex;
  align-items: center;
}
.site-navbar_add_user > p:nth-of-type(1) {
  height: 0.2604rem;
  width: 0.0052rem;
  background-color: #f8f8f8;
  margin: 0 0.1563rem;
}
.site-navbar_add_user > p:nth-of-type(2) {
  font-size: 0.0938rem;
  color: #525252;
  margin: 0 0.1042rem;
}
.site-navbar_input {
  width: 1.0313rem;
  height: 0.1667rem;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.0208rem 0.0573rem;
  border-radius: 0.0885rem;
}
.site-navbar_input input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #cecece;
  font-size: 0.0729rem;
}
.site-navbar_input input {
  width: 80%;
  font-size: 0.0729rem;
  border: none;
  background-color: #f8f8f8;
}
.site-navbar_down_icon img {
  width: 0.1042rem;
  height: 0.1042rem;
}
.site-navbar_head_icon img {
  width: 0.2396rem;
  height: 0.2396rem;
}
.site-navbar_input img {
  width: 0.125rem;
  height: 0.125rem;
}
.el-carousel__item p {
  color: #888888;
  font-size: 0.0729rem;
}

.site-navbar_add_swiper_box {
  min-width: 2.6042rem;
  max-width: 4.1667rem;
  margin-left: 0.1042rem;
  height: 0.1042rem;
  line-height: 0.1042rem;
}
.site-navbar_add_swiper {
  display: flex;
  align-items: center;
}
.site-navbar_add_swiper > img {
  width: 0.3698rem;
}
// ::-webkit-scrollbar {
//   width: 0rem;
//   height: 0.0052rem;
// }
.site-navbar {
  border-radius: 0.0781rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  width: 1.6667rem;
  height: 0.651rem;
  background-color: white;
  top: 0.1302rem;
  left: 0.1302rem;
  right: 0.1302rem;
  box-shadow: 0rem 0rem 0rem #fff;
  .posi {
    position: relative;
    width: 0.7031rem;
    span.userId {
      position: absolute;
      top: -0.0208rem;
      left: 0.2396rem;
    }
    span.userName {
      position: absolute;
      top: 0.0521rem;
      left: 0.2396rem;
    }
  }
  .site-navbar__brand-lg {
    img {
      // width: 0.7396rem;
      // height: 0.3073rem;
      width: 1.2448rem;
      height: 0.3021rem;
    }
    span {
      width: 0.4583rem;
      height: 0.2188rem;
      font-size: 0.1667rem;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      line-height: 0.2188rem;
      color: #ffffff;
    }
  }
  // span.userId {
  //   display: block;
  // }
}
.site-sidebar {
  top: 0.7813rem;
  width: 1.6667rem;
  left: 0.1302rem;
  border-top: none;
}
.site-navbar__header {
  background: url("../../static/img/logo_back.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 0.651rem;
  width: 1.6667rem;
  border-top-left-radius: 0.0521rem;
  border-top-right-radius: 0.0521rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.site-navbar__body {
  background-color: #fff;
  margin-left: 1.7969rem;
  border-top-left-radius: 0.0781rem;
  border-top-right-radius: 0.0781rem;
  height: 0.5208rem;
}
.site-navbar__brand {
  position: relative;
  height: 0.4948rem;
  line-height: 1.5;
}
.site-navbar_white {
  position: absolute;
  width: 100%;
  height: 0.1563rem;
  border-bottom: none;
  border-bottom-left-radius: 0;
  bottom: -1px;
  left: 0;
}
.site-navbar_content {
  position: relative;
  width: 100%;
  height: 0.4948rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  > img {
    width: 0.3208rem;
    margin-right: 0.1146rem;
  }
}
.site-navbar_content_text {
  text-align: left;
  color: #fff;
  > p:first-child {
    font-size: 0.1042rem;
    font-weight: 400;
  }
  > p:nth-of-type(2) {
    font-size: 0.0521rem;
    white-space: 0;
    font-weight: 400;
    transform: scale(0.8);
    position: relative;
    transform-origin: 0 0;
  }
}
.site-sidebar__menu.el-menu {
  width: 1.6667rem;
  border-top: none;
}
.site-content__wrapper {
  margin-left: 1.7969rem;
  background-color: white;
  margin-top: 0.75rem;
  padding: 0.1302rem;
  min-height: calc(100% - 0.8333rem);
}
.site-content > .el-tabs > .el-tabs__header {
  left: 1.9271rem;
  right: 0.1302rem;
  top: 0.5469rem;
  border-bottom-left-radius: 0.0781rem;
  border-bottom-right-radius: 0.0781rem;
  min-width: 7rem;
}
.site-wrapper {
  width: 100%;
  height: 100%;
  padding: 0.1302rem;
  background-color: #f2f2f2;
}
.site-content--tabs {
  padding-top: 0;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.site-sidebar--dark {
  background-color: white;
}
.site-sidebar--dark .site-sidebar__menu.el-menu {
  background-color: white;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item,
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title,
.site-sidebar--dark > .el-menu--popup .el-menu-item,
.site-sidebar--dark > .el-menu--popup .el-submenu > .el-submenu__title,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu-item,
.site-sidebar--dark-popper
  .site-sidebar__menu.el-menu
  .el-submenu
  > .el-submenu__title,
.site-sidebar--dark-popper > .el-menu--popup .el-menu-item,
.site-sidebar--dark-popper > .el-menu--popup .el-submenu > .el-submenu__title {
  color: #525252;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item.is-active {
  color: #0fdd8d;
  border-left: 0.0417rem solid #0fdd8d;
  padding-left: 0.0625rem !important;
  background-color: #f0fffd;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item.is-actives {
  color: #525252 !important;
  border-left: 0 solid #0fdd8d !important;
  padding-left: 0.0625rem !important;
  background-color: #fff !important;
}
.el-menu-item:hover {
  background-color: #f0fffd !important;
}
.el-submenu__title:hover {
  background-color: #f0fffd !important;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu {
  background-color: white;
}
.site-sidebar--dark .site-sidebar__menu.el-menu .el-menu,
.site-sidebar--dark .site-sidebar__menu.el-menu .el-submenu.is-opened,
.site-sidebar--dark > .el-menu--popup .el-menu,
.site-sidebar--dark > .el-menu--popup .el-submenu.is-opened,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-menu,
.site-sidebar--dark-popper .site-sidebar__menu.el-menu .el-submenu.is-opened,
.site-sidebar--dark-popper > .el-menu--popup .el-menu,
.site-sidebar--dark-popper > .el-menu--popup .el-submenu.is-opened {
  background-color: white;
}
.el-tabs__item {
  margin: 0 0.1042rem;
  padding: 0 0.026rem;
}
.el-tabs__active-bar {
  display: none;
}
.site-content > .el-tabs > .el-tabs__content > .site-tabs__tools {
  display: none;
}
.site-sidebar--dark
  .site-sidebar__menu.el-menu
  .el-submenu.is-active
  > .el-submenu__title {
  color: #525252;
}
.site-content > .el-tabs > .el-tabs__content {
  padding: 0;
}
.site-navbar_add_right_box {
  position: fixed;
  top: 0rem;
  min-width: 7rem;
  right: 0.1302rem;
  left: 1.7969rem;
  background-color: #f2f2f2;
  z-index: 10;
  height: 0.625rem;
}
.site-navbar_add_right {
  margin: 0 0.1302rem;
  margin-top: 0.1302rem;
  background-color: white;
  width: calc(100% - 0.1302rem);
  height: 100%;
  border-radius: 0.0781rem;
  box-shadow: 0rem 0.0104rem 0.0104rem 0rem rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  padding-left: 0.0885rem;
  padding-right: 0.1823rem;
  padding-bottom: 0.2083rem;
}
.el-tabs__item {
  font-size: 0.0729rem;
  line-height: 0.2083rem;
  padding: 0 0.0365rem !important;
  margin: 0 0.0521rem !important;
}
.el-card {
  border: none;
}
.el-card__body {
  padding: 0;
}
.el-dropdown {
  position: relative;
  .el-dropdown-link {
    display: flex;
    line-height: 0.4167rem;
    div:first-child > img {
      width: 0.1042rem;
      height: 0.1042rem;
      justify-content: space-between;
    }
    span {
      margin: 0 0.099rem;
      font-size: 0.0938rem;
      color: #525252;
    }
    & > img {
      width: 0.2917rem;
      height: 0.2917rem;
    }
  }
  /deep/.el-dropdown-menu__item {
    width: 0.9896rem;
    height: 0.2604rem;
  }
}
.head_nav {
  position: absolute;
  right: 5%;
  top: 10%;
  i {
    font-size: 0.1502rem;
  }
}
</style>
